<template>
    <div class="comment-list-container">
        <van-cell
            title="全部评论"
        />
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            :immediate-check='false'
            @load="onLoad"
            >
            <CommentItem
                v-for="(comment, index) in commentList"
                :key="index"
                :commentItem="comment"
                :index="index"
                @onLike="onLike"
                @reply-click="$emit('reply-click', addIndex($event, index))"
            />
        </van-list>
    </div>
</template>

<script>
import CommentItem from './comment_item';
import * as Api from 'api/common';

export default {
    name: 'comment_list',
    components: {
        CommentItem
    },
    props: {
        source: {
            type: [Number, String, Object], // 引入了 json-bigint 导致大的 int 数被转化为对象格式
            required: true
        },
        type: {
            type: String,
            default: 'a'
        },
        newItem: {
            type: Object,
            default () {
                return {};
            }
        },
        commentListItemIndex: {
            type: [Object]
        }
    },
    // 监控data中的数据变化
    watch: {
        newItem: {
            handler (val, oldVal) {
                if (JSON.stringify(val) !== JSON.stringify(oldVal)) {
                    this.commentList.unshift(val);
                    this.totalCount++;
                }
            }
        },
        totalCount: {
            handler (val) {
                this.$emit('comment-count', val);
            }
        },
        commentListItemIndex: {
            handler (val, oldVal) {
                if (JSON.stringify(val) !== JSON.stringify(oldVal)) this.commentList[val.index].reply_count++;
            }
        }
    },
    // 定义属性
    data () {
        return {
            commentList: [],
            loading: false,
            finished: false,
            offset: null,
            limit: 10,
            totalCount: null
        };
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 方法集合
    methods: {
        async onLoad() {
            const params = {
                type: this.type,
                source: +this.source,
                offset: this.offset,
                limit: this.limit
            };
            const res = await Api.reqDev('/v1_0/comments', 'get', { params });
            if (res.message === 'OK') {
                let { results } = res.data;
                this.commentList.push(...results);
                this.totalCount = res.data.total_count;
                this.loading = false;
                if (results.length && res.data.end_id && res.data.last_id && (res.data.end_id !== res.data.last_id)) {
                    this.offset = res.data.last_id;
                } else this.finished = true;
            }
        },
        onLike (index) {
            if (index < 0) return;
            if (this.commentList[index].is_liking) this.commentList[index].like_count--;
            else this.commentList[index].like_count++;
            this.commentList[index].is_liking = !this.commentList[index].is_liking;
            this.$toast.success(`${this.commentList[index].is_liking ? '' : '取消'}点赞成功`);
        },
        addIndex (commentItem, index) {
            // commentItem.index = index;
            this.$set(commentItem, 'index', index);
            return commentItem;
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {
        this.onLoad();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted () {
    }
};
</script>

<style lang='less' scoped>
</style>
